<template>
  <div class="box-main">
    <div class="box-top">
      <img class="box-top-icon1" src="@/assets/images/ExpertCertification/icon2.png" alt="" />
      <img class="box-top-icon2" src="@/assets/images/ExpertCertification/icon3.png" alt="" />
    </div>
    <div class="card card-before m-b-5-13">
      <div class="card-title">选择频道</div>
      <div class="tabs m-b-2-82">
        <div class="tabs-item">游戏</div>
        <div class="tabs-item tabs-item-active">交友</div>
        <div class="tabs-item">喊麦</div>
        <div class="tabs-item">唠嗑</div>
        <div class="tabs-item">聊天</div>
        <div class="tabs-item">聊天</div>
      </div>
      <div class="box-textarea">
        <textarea class="box-textarea-inner" placeholder="请填写您认证才艺相关的经历，如获奖经历、参赛经历、学历经历、表演经历等内容或链接." cols="20"
          rows="5"></textarea>
      </div>
    </div>
    <div class="card m-b-5-13">
      <div class="card-title">达人专属特权</div>
      <div class="list">
        <div class="list-item">
          <img src="@/assets/images/ExpertCertification/icon4.png" alt="" />
          <p class="list-item-name">专属认证</p>
        </div>
        <div class="list-item">
          <img src="@/assets/images/ExpertCertification/icon5.png" alt="" />
          <p class="list-item-name">专属流量</p>
        </div>
        <div class="list-item">
          <img src="@/assets/images/ExpertCertification/icon6.png" alt="" />
          <p class="list-item-name">专属称号</p>
        </div>
        <div class="list-item">
          <img src="@/assets/images/ExpertCertification/icon7.png" alt="" />
          <p class="list-item-name">玩法尝鲜</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-title">认证规则</div>
      <p class="tips">·申请认证需主播在近7天内，有有效开播记录，即持续开播超过30分钟；</p>
      <p class="tips">·申请认证后，频道主编会在5个工作日内，对主播直播内容进行审核；</p>
      <p class="tips">·在申请认证后，主播需按照对应品类的要求，丰富直播内容；</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box-main {
  min-height: 100vh;
  box-sizing: border-box;
  background: #F4F7FF;
  padding: 0 3.08rem;
  background-image: url('@/assets/images/ExpertCertification/icon1.png');
  background-size: 100% 65.9rem;
  background-repeat: no-repeat;

  .m-b-2-82 {
    margin-bottom: 2.82rem;
  }

  .m-b-5-13 {
    margin-bottom: 5.13rem;
  }

  .box-top {
    margin-bottom: 8.95rem;
    padding-top: 2.56rem;
    padding-left: 4.1rem;
    position: relative;

    &-icon1 {
      width: 39.74rem;
      height: 23.85rem;
      display: block;
    }

    &-icon2 {
      position: absolute;
      width: 36.92rem;
      height: 48.97rem;
      display: block;
      top: -2.3rem;
      right: 7.18rem;
      z-index: 1;
    }
  }

  .card {
    background: #FFFFFF;
    border-radius: 2.56rem;
    padding: 3.59rem 2.56rem 5.13rem;
    position: relative;
    z-index: 10;

    &-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: normal;
      font-size: 4.1rem;
      line-height: 4.1rem;
      text-align: center;
      background: linear-gradient(0deg, #4E5DE2 0%, #4F9CF9 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 3.33rem;
    }

    .tabs {
      display: flex;
      align-items: center;
      gap: 0 3.59rem;

      &-item {
        font-family: PingFang SC, PingFang SC;
        font-weight: normal;
        font-size: 3.08rem;
        color: #666666;
        line-height: 4.36rem;
        background: #F4F7FF;
        border-radius: 3.33rem;
        padding: 1.03rem 2.56rem;
      }

      &-item-active {
        color: #FFFFFF;
        background: linear-gradient(90deg, #4E5DE2 0%, #4F9CF9 100%);
      }
    }

    .box-textarea {
      background: #F9F9F9;
      border-radius: 1.54rem;
      padding: 3.59rem 2.56rem;

      &-inner {
        border: none;
        width: 100%;
        background: transparent;
        font-family: PingFang SC, PingFang SC;
        font-weight: normal;
        font-size: 3.08rem;
        color: #333;
        line-height: 4.36rem;
        resize: none;
      }
    }

    .list {
      display: flex;
      gap: 0 11.79rem;
      align-items: center;
      justify-content: center;

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 6.67rem;
          height: 6.67rem;
          display: block;
        }

        &-name {
          font-family: PingFang SC, PingFang SC;
          font-weight: normal;
          font-size: 3.08rem;
          color: #666666;
          line-height: 4.36rem;
          margin-top: 1.03rem;
        }
      }
    }

    .tips {
      font-family: PingFang SC, PingFang SC;
      font-weight: normal;
      font-size: 3.08rem;
      color: #666666;
      line-height: 4.36rem;
      margin-bottom: 3.08rem;
    }
  }

  .card-before {
    &::before {
      content: '';
      position: absolute;
      width: 6rem;
      height: 6.41rem;
      background: #F4F7FF;
      border-radius: 50%;
      right: -3.3rem;
      top: 10.93rem;
    }
  }

}
</style>